<template>
    <div class="chart-box">
        <div ref="chart1"></div>
        <div ref="chart2"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "FocusIndicators",
    data() {
        return {
            options: {
                title: {
                    text: '平均结案时间',
                    left: 'center',
                    top: '85%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    }
                },
                series: [
                    {
                        type: 'gauge',
                        radius: "90%", //仪表大小
                        min: 0,
                        max: 100,
                        // --- 仪表盘
                        axisLine: {
                            lineStyle: {
                                width: 15,
                                color: [
                                    [0.54, 'rgb(27, 196, 124)'],
                                    [0.72, 'rgb(255, 182, 100)'],
                                    [1, 'rgb(232, 49, 45)']
                                ]
                            }
                        },
                        // --- 分隔线样式
                        splitLine: {
                            length: '6%',
                            distance: 0,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        // --- 刻度样式
                        axisTick: { show: false },
                        // --- 刻度标签
                        axisLabel: {
                            fontSize: 12, color: '#fff', distance: 18,
                            formatter: '{value}%',

                        },
                        // --- 仪表盘指针
                        pointer: { width: 10, length: '70%', itemStyle: { color: 'rgb(255, 182, 100)' } },
                        // --- 仪表盘指针圆
                        markPoint: {
                            animation: false,
                            silent: true,
                            data: [
                                {
                                    x: '50%',
                                    y: '50%',
                                    symbol: 'circle',
                                    symbolSize: 10,
                                    itemStyle: { color: 'rgb(255, 182, 100)' }
                                },
                                {
                                    x: '50%',
                                    y: '50%',
                                    symbol: 'circle',
                                    symbolSize: 15,
                                    itemStyle: { color: '#fff' }
                                },
                            ],
                        },
                        // --- 仪表盘 显示数据
                        detail: {
                            fontSize: 20,
                            fontWeight: 'bold',
                            color: 'rgb(255, 182, 100)'
                        },
                        data: [
                            {
                                value: 85.66,
                                // name: ""
                            }
                        ]
                    }
                ]
            }
        }
    },
    mounted() {

        setTimeout(() => {
            const chart = echarts.init(this.$refs.chart1)
            chart.setOption(this.options)

            const chart2 = echarts.init(this.$refs.chart2)
            const option2 = JSON.parse(JSON.stringify(this.options))
            option2.title.text = '民事裁判申请执行率'
            option2.series[0].markPoint.data[0].itemStyle.color = 'rgb(232, 49, 45)'
            option2.series[0].pointer.itemStyle.color = 'rgb(232, 49, 45)'
            option2.series[0].detail.color = 'rgb(232, 49, 45)'
            option2.series[0].axisLine= {
                            lineStyle: {
                                width: 15,
                                color: [
                                    [0.46, 'rgb(27, 196, 124)'],
                                    [0.55, 'rgb(255, 182, 100)'],
                                    [1, 'rgb(232, 49, 45)']
                                ]
                            }
                        },
            chart2.setOption(option2)
        }, 0)
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 225px;
    display: flex;
    width: 100%;

    div {
        width: 50%;
        height: 100%;
    }
}
</style>